<template>
	<div>
		<blue-button text="页面风格" :clickEvent="addClickEvent" class="add-btn" style="text-align:left"></blue-button>
		<!-- 编辑或新增的弹框 -->
		<edit-model ref="editModel" title="页面主体风格设置">
			<div class="slot-banner" slot="main">
				<div>
					<span class="eidt-slot-title" style="display:inline-block">页面名称<span class="required">*</span></span>
					<input type="text" v-model="Title" style="display:inline-block" />
				</div>
				<div>
					<span class="eidt-slot-title" style="display:inline-block">页面主背景色<span class="required">*</span></span>
					<input type="color" v-model="Bgcolor" style="border: none;height: 30px;display:inline-block" />
				</div>
				<div class="fabu-box">
					<blue-button text="确认" :clickEvent="submitClickEvent"></blue-button>
				</div>
			</div>

		</edit-model>
		<m-toast ref="toast"></m-toast>
		<m-dialog ref="dialog"></m-dialog>
	</div>
</template>

<script>
	import BlueButton from "../../../edit-components/BlueButton";
	import EditModel from "../../../edit-components/EditModel";
	import Toast from "../../../edit-components/Toast";
	import Dialog from "../../../edit-components/Dialog";
	import getPageName from "../../../utils/getPageName";
	import { getPageTree } from "../../../utils/getPageTree";
	
	export default {
		props: {
			relGroup: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				Bgcolor: "",
				Title:'',
				page: getPageName()
			}
		},
		components: {
			"blue-button": BlueButton,
			"edit-model": EditModel,
			"m-toast": Toast,
			"m-dialog": Dialog,
		},
		methods: {
			errorToast(msg, duration = 1000) {
				this.$refs.toast.toast(msg, duration);
			},
			addClickEvent() {
				this.$refs.editModel.showCover();
				this.getBgcolordata()
			},
			submitClickEvent() {
				//校验
				if(!this.Bgcolor) {
					this.errorToast("请配置背景颜色");
					return false;
				}
				let regu = /^#[0-9a-fA-F]{3,6}$/;
				let re = new RegExp(regu);
				if(!re.test(this.Bgcolor)) {
					this.errorToast("请输入带#号的16进制颜色");
					return false;
				}
				if(!this.Title) {
					this.errorToast("请设置页面名称");
					return false;
				}
				//存值
				this.setPageConfig({
						activitiesBgcolor: this.Bgcolor,
						activitiesTitle:this.Title
					})
				console.log(this.Bgcolor,"当前的背景色")
				this.$refs.editModel.hideCover();
				PSEvent.trigger("BgcolorUpdate");
			},
			//回显获取设置的颜色
			getBgcolordata() {
				if(this.pageConfig) {
					this.Bgcolor = this.pageConfig.activitiesBgcolor;
					this.Title = this.pageConfig.activitiesTitle;
				}
			},
		},
		computed: {
			pageName() {
//				return this.page;
				return this.$store.getters.getRouterLifeCycleOfName.name;
			},
			pageConfig() {
				return getPageTree(this, this.pageName).config;
			}
		},

		watch: {
            pageName(page) {
            	console.log("page------watch", page);
			},
			Bgcolor(val,oldval){
				console.log(val,oldval)
			}
		},
		created() {
			console.log("sdss");
		},
		mounted() {
			console.log("mounted");
			console.log("pageName", this.pageName);
			console.log("pageConfig", this.pageConfig);
			this.getBgcolordata()
		},
	}
</script>

<style>
	.add-btn {
		margin-bottom: 10px;
	}
	
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	.banner-edit-box{
		z-index: 1;
	}
</style>